<div class="opwindow">
	<form name="theform2" id="theform2" method="post" action="{echo \befen\get_url()}">
	<div class="layui-form layui-row">
		<div class="layui-form-item">
			<div class="layui-col layui-col-md12">
				<label>商户名称</label> <span class="red">*</span>
				<div class="layui-input-inline" style="width:100%;">
					<input type="text" name="merchant_name" id="merchant_name" class="layui-input" value="" placeholder="商户名称">
				</div>
			</div>
		</div>
		<div class="layui-tab layui-tab-brief">
			<ul class="layui-tab-title">
				<li class="layui-this">商户资料</li>
				<li>资质图片</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					<div class="layui-form-item">
						<div class="layui-col layui-col-md3">
							<label>商户类型</label> <span class="red">*</span>
							<div class="layui-input-inline layui-input-wdith">
								<select name="merchant_type" id="merchant_type" class="layui-select">
									<option value="">选择商户类型</option>
									<!--{loop model('Merchant')->get_type() $key $val}-->
									<option value="{$key}">{$val}</option>
									<!--{/loop}-->
								</select>
							</div>
						</div>
						<div class="layui-col layui-col-md3">
							<label>商户简称</label> <span class="red">*</span>
							<input type="text" name="merchant_shortname" id="merchant_shortname" class="layui-input" value="" placeholder="">
						</div>
						<div class="layui-col layui-col-md3">
							<label>客服电话</label> <span class="red">*</span>
							<input type="text" name="service_phone" id="service_phone" class="layui-input" value="" placeholder="">
						</div>
						<div class="layui-col layui-col-md3">
							<label>商户签约费率</label> <span class="red">*</span>
							<input type="number" name="trade_rates" id="trade_rates" class="layui-input" value="0.00" placeholder="" min="0.3" max="0.6" step="0.01">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-col layui-col-md12">
							<label>结算规则</label> <span class="red">*</span>
							<div class="layui-input-inline layui-input-wdith">
								<select name="settlement_code" id="settlement_code" class="layui-select" lay-verify="required" lay-search="">
									<option value="">选择结算规则</option>
									<!--{loop $settlement_list $key $val}-->
									<option value="{$key}">{$val[settlement_type]} / {$val[settlement_name]}</option>
									<!--{/loop}-->
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item" id="area-picker">
						<input type="hidden" id="area_code" name="area_code" value="">
						<div class="layui-col layui-col-md3">
							<label>所属省级</label> <span class="red">*</span>
							<div class="layui-input-inline layui-input-wdith">
								<select name="province" id="province" class="province-selector" data-value=""><option value="">--选择省--</option></select>
							</div>
						</div>
						<div class="layui-col layui-col-md3">
							<label>所属市级</label> <span class="red">*</span>
							<div class="layui-input-inline layui-input-wdith">
								<select name="city" id="city" class="city-selector" data-value=""><option value="">--选择市--</option></select>
							</div>
						</div>
						<div class="layui-col layui-col-md3">
							<label>所属区级</label> <span class="red">*</span>
							<div class="layui-input-inline layui-input-wdith">
								<select name="county" id="county" class="county-selector" data-value=""><option value="">--选择区--</option></select>
							</div>
						</div>
						<div class="layui-col layui-col-md3">
							<label>经营地址</label> <span class="red">*</span>
							<input type="text" name="address" id="address" class="layui-input" value="" placeholder="">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-col layui-col-md3">
							<label>负责人名称</label> <span class="red">*</span>
							<input type="text" name="per_name" id="per_name" class="layui-input" value="" placeholder="">
						</div>
						<div class="layui-col layui-col-md3">
							<label>负责人邮箱</label> <span class="red">*</span>
							<input type="text" name="per_email" id="per_email" class="layui-input" value="" placeholder="">
						</div>
						<div class="layui-col layui-col-md3">
							<label>负责人电话</label> <span class="red">*</span>
							<input type="text" name="per_phone" id="per_phone" class="layui-input" value="" placeholder="">
						</div>
						<div class="layui-col layui-col-md3">
							<label>负责人身份证号码</label> <span class="red">*</span>
							<input type="text" name="per_id_number" id="per_id_number" class="layui-input" value="" placeholder="">
						</div>
					</div>
				</div>
				<div class="layui-tab-item">
					<div class="layui-form-item">
					<div class="layui-col layui-col-md3">
							<label>营业执照号码</label> <span class="red">*</span>
							<input type="text" name="license_number" id="license_number" class="layui-input" value="" placeholder="">
						</div>
						<div class="layui-col layui-col-md3">
							<label>身份证姓名</label> <span class="red">*</span>
							<input type="text" name="id_card_name" id="id_card_name" class="layui-input" value="" placeholder="">
						</div>
						<div class="layui-col layui-col-md3">
							<label>身份证号码</label> <span class="red">*</span>
							<input type="text" name="id_card_number" id="id_card_number" class="layui-input" value="" placeholder="">
						</div>
						<div class="layui-col layui-col-md3">
							<label>身份证有效期</label> <span class="red">*</span>
							<div><input type="text" name="card_period_begin" id="card_period_begin" class="layui-input" value="" placeholder="" style="float:left;width:96px;"><span style="float:left;line-height:38px;padding:0 8px;">—</span><input type="text" name="card_period_end" id="card_period_end" class="layui-input" value="" placeholder="" style="float:left;width:96px;"></div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-col layui-col-md3">
							<label>结算账户-类型</label> <span class="red">*</span>
							<div class="layui-input-inline layui-input-wdith">
								<select name="bank_account_type" id="bank_account_type" class="layui-select">
									<option value="">选择结算账户类型</option>
									<!--{loop $this->account_type $key $val}-->
									<option value="{$key}">{$val}</option>
									<!--{/loop}-->
								</select>
							</div>
						</div>
						<div class="layui-col layui-col-md3">
							<label>结算账户-开户银行</label> <span class="red">*</span>
							<div style="position:relative;">
								<input type="text" name="account_bank" id="account_bank" class="layui-input" value="" placeholder="">
							</div>
						</div>
						<div class="layui-col layui-col-md3">
							<label>结算账户-账户名称</label> <span class="red">*</span>
							<input type="text" name="account_name" id="account_name" class="layui-input" value="" placeholder="">
						</div>
						<div class="layui-col layui-col-md3">
							<label>结算账户-账户卡号</label> <span class="red">*</span>
							<input type="text" name="account_number" id="account_number" class="layui-input" value="" placeholder="">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-col layui-col-md2">
							<label>营业执照</label> <span class="red">*</span>
							<div class="mch-box">
								<img id="license_copy" class="mch-img" src="">
								<input type="hidden" name="license_copy" class="mch-obj" value="">
							</div>
						</div>
						<div class="layui-col layui-col-md2">
							<label>身份证人像面</label> <span class="red">*</span>
							<div class="mch-box">
								<img id="id_card_copy" class="mch-img" src="">
								<input type="hidden" name="id_card_copy" class="mch-obj" value="">
							</div>
						</div>
						<div class="layui-col layui-col-md2">
							<label>身份证国徽面</label> <span class="red">*</span>
							<div class="mch-box">
								<img id="id_card_national" class="mch-img" src="">
								<input type="hidden" name="id_card_national" class="mch-obj" value="">
							</div>
						</div>
						<div class="layui-col layui-col-md2">
							<label>授权函</label>
							<div class="mch-box">
								<img id="license_auth" class="mch-img" src="">
								<input type="hidden" name="license_auth" class="mch-obj" value="">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-col layui-col-md2">
							<label>商户门头照片</label> <span class="red">*</span>
							<div class="mch-box">
								<img id="store_door" class="mch-img" src="">
								<input type="hidden" name="store_door" class="mch-obj" value="">
							</div>
						</div>
						<div class="layui-col layui-col-md2">
							<label>店内环境照片</label> <span class="red">*</span>
							<div class="mch-box">
								<img id="store_inside" class="mch-img" src="">
								<input type="hidden" name="store_inside" class="mch-obj" value="">
							</div>
						</div>
						<div class="layui-col layui-col-md2">
							<label>特殊资质证明</label>
							<div class="mch-box">
								<img id="qualifications" class="mch-img" src="">
								<input type="hidden" name="qualifications" class="mch-obj" value="">
							</div>
						</div>
						<div class="layui-col layui-col-md2">
							<label>其他证明材料1</label>
							<div class="mch-box">
								<img id="qualifications1" class="mch-img" src="">
								<input type="hidden" name="qualifications1" class="mch-obj" value="">
							</div>
						</div>
						<div class="layui-col layui-col-md2">
							<label>其他证明材料2</label>
							<div class="mch-box">
								<img id="qualifications2" class="mch-img" src="">
								<input type="hidden" name="qualifications2" class="mch-obj" value="">
							</div>
						</div>
						<div class="layui-col layui-col-md2">
							<label>其他证明材料3</label>
							<div class="mch-box">
								<img id="qualifications3" class="mch-img" src="">
								<input type="hidden" name="qualifications3" class="mch-obj" value="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--{if !isset($value['applyment_state']) || in_array($value['applyment_state'], ['', 'APPLYMENT_STATE_EDITTING', 'APPLYMENT_STATE_REJECTED', 'APPLYMENT_STATE_CANCELED'])}-->
		<div class="layui-form-item">
			<div class="layui-col layui-col-md12" style="text-align:right;">
				<button type="submit" name="save" value="save" id="save" class="layui-btn">保存</button>
				<!--{if request()->action() == 'merchant_detail'}-->
				<button type="submit" name="submit2" value="submit2" id="submit2" class="layui-btn">提交申请</button>
				<!--{/if}-->
				<button type="button" id="business_license" class="layui-btn layui-btn-normal">自动识别营业执照</button>
				<button type="button" id="ocr_idcard_copy" class="layui-btn layui-btn-normal">自动识别身份证人像面</button>
				<button type="button" id="ocr_idcard_national" class="layui-btn layui-btn-normal">自动识别身份证国徽面</button>
			</div>
		</div>
		<!--{/if}-->
	</div>
	</form>
</div>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1614161_8o9u8s6h5fn.css" />
<style>
.layui-btn-download {width:96px;margin-top:5px;}
.mch-box { position:relative;width:96px;height:96px; }
.mch-box .mch-img { width:100%;height:100%;cursor:pointer; }
.mch-box .mch-view {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, .5);
	padding-top:35px;
	text-align:center;
	display:none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.mch-box .mch-view .iconfont {color:#FFF;font-size:24px;margin:0 3px;}
</style>
<script type="text/javascript">
var merchant_id = "{echo input('param.merchant_id')}";
init_Form();
init_Layarea("#area-picker", {
	change: res => { $('#area_code').val(res.countyCode) }
});
$(".mch-box").each(function(i){
	var mch_box = $(this);
	var mch_img = $(this).find(".mch-img");
	var mch_obj = $(this).find(".mch-obj");
	mch_box.hover(function(){
		if($(this).hasClass("hasImg")) {
			$(this).find(".mch-view").fadeIn(200);
		}
	}, function(){
		$(this).find(".mch-view").hide();
	});
	if(mch_obj.val()) {
		mch_box.addClass("hasImg");
		mch_img.attr("src", mch_obj.val());
	} else {
		mch_box.removeClass("hasImg");
		mch_img.attr("src", "/public/system/add-img.png");
	}
	add_upload(mch_img);
	mch_box.append('<p class="mch-view"><a href="javascript:;" class="iconfont icon-browse" title="预览"></a><a href="javascript:;" class="iconfont icon-ashbin" title="删除"></a></p>');
});
$(".icon-ashbin").click(function(){
	$(this).parent().hide();
	$(this).parent().parent().removeClass("hasImg");
	$(this).parent().parent().find(".mch-obj").val("");
	$(this).parent().parent().find(".mch-img").attr("src", "/public/system/add-img.png");
});
$(".icon-browse").click(function(){
	$(this).parent().hide();
	layer.photos({
		anim: 5,
		photos: {
			title: "",
			id: 0,
			start: 0,
			data: [
				{
					alt: "",
					pid: 0,
					src: $(this).parent().parent().find(".mch-obj").val(),
					thumb: $(this).parent().parent().find(".mch-obj").val(),
				}
			]
		}
	});
});
function add_upload(elem) {
	if(!elem) {
		elem = '.item-upload';
	}
	init_upload({
		elem: elem,
		url: "{echo url('merchant/upload', ['merchant_id' => input('param.merchant_id')])}",
		exts: "png|jpg",
		acceptMime: "image/*",
		callback: function(item, data, index, upload){
			//console.log(item);
			//console.log(data);
			if(data.status == 0) {
				showAlert(data.message);
			} else {
				item.parent().addClass("hasImg");
				item.attr("src", data.message);
				item.parent().find(".mch-obj").val(data.message);
			}
		}
	});
}
$("#save").click(function(){
	if(!$('#theform2 input[name=merchant_id]').val()) {
		showAlert("请选择商户");
		return false;
	}
	ajaxSubmit(this, "", "#theform2", function(){
		<!--{if request()->action() == 'merchant_add'}-->
		reload();
		<!--{/if}-->
	});
});
ajaxSubmit("#submit2", "", "#theform2", function(){
	<!--{if request()->action() == 'merchant_detail'}-->
	reload();
	<!--{/if}-->
});
function media_upload(show_index) {
	if(index >= media.length) {
		hideLoader();
		$("#theform2").submit();
	} else {
		if(Object.prototype.toString.call(media[index]) == "[object Undefined]") {
			index++;
			media_upload();
		} else {
			$.ajax({
				type: "POST",
				dataType: "json",
				cache: false,
				timeout: 20000,
				url: "{echo url('PayWeixin/media_upload')}",
				data: {
					ajax: "json",
					id: "{echo input('param.id')}",
					merchant_id: "{echo input('param.merchant_id')}",
					field: media[index].field,
					filename: media[index].value,
				},
				success: function(data){
					console.log(data);
					index++;
					setTimeout(function(){
						media_upload();
					}, 500);
				},
				error: function(xhr, status){
					console.log(status);
					console.log(xhr);
					showAlert(media[index].title + " 上传失败");
				},
				complete: function(){
					
				},
				beforeSend: function(){
					//showLoader();
					//console.log();
					$(".waiting_message").text("正在上传：" + media[index].title + "...");
				}
			});
		}
	}
}
var index;
var media;
var show_index;
$("#submit2").click(function(event){
	event.preventDefault();
	if(!$('#theform2 input[name=merchant_id]').val()) {
		showAlert("请选择商户");
		return false;
	}
	index = 0;
	media = [];
	$(".mch-box").each(function(i){
		if($(this).hasClass("hasImg")) {
			media.push({
				title: $(this).parent().find("label").text(),
				field: $(this).find(".mch-obj").attr("name"),
				value: $(this).find(".mch-obj").attr("value"),
			});
		}
	});
	//showLoader();
	init_Layer(function(){
		layer.msg("<p class='waiting_message'>开始上传图片，请勿关闭网页！</p>", {anim:-1,shade:0.5,icon:7,time:1000000,id:"upload_waiting"})
	});
	setTimeout(function(){
		media_upload();
	}, 1000);
	/*
	ajaxSubmit(this, "", "#theform2", function(){
		<!--{if request()->action() == 'merchant_detail'}-->
		reload();
		<!--{/if}-->
	});
	*/
});
$('#theform2 input[name=merchant_name]').autoComplete({
	url: "{echo url('merchant/check')}",
	field: "",
	value: "{echo isset($value['merchant_name']) ? $value['merchant_name'] : input('param.merchant_name')}",
	name_hidden: "merchant_id",
	value_hidden: "{echo isset($value['merchant_id']) ? $value['merchant_id'] : input('param.merchant_id')}",
}, function(o, _self, _target){
	if(_target.val()) {
		_self.attr("readonly", "readonly").addClass("layui-disabled");
		merchant_id = _target.val();
		$.ajax({
			type: "POST",
			dataType: "json",
			cache: false,
			timeout: 10000,
			url: "{echo url('PayWeixin/get_mch_info')}",
			data: {
				ajax: "json",
				merchant_id: merchant_id,
			},
			success: function(data){
				$("#merchant_name").val(data.contents.merchant_name);
				$("#merchant_type option:contains('" + data.contents.merchant_type + "')").attr("selected", "selected");
				$("#merchant_shortname").val(data.contents.merchant_shortname);
				$("#service_phone").val(data.contents.service_phone);
				$("#trade_rates").val(get_rates(data.contents.trade_rates));
				$("#settlement_code").val(data.contents.settlement_code);
				$("#area_code").val(data.contents.area_code);
				init_Layarea("#area-picker", {
					data: {
						province: data.contents.province,
						city: data.contents.city,
						county: data.contents.county,
					},
					change: res => { $('#area_code').val(res.countyCode) }
				});
				$("#address").val(data.contents.address);
				$("#per_name").val(data.contents.per_name);
				$("#per_email").val(data.contents.per_email);
				$("#per_phone").val(data.contents.per_phone);
				$("#per_id_number").val(data.contents.per_id_number);
				$("#license_number").val(data.contents.license_number);
				$("#id_card_name").val(data.contents.id_card_name);
				$("#id_card_number").val(data.contents.id_card_number);
				$("#card_period_begin").val(data.contents.id_card_period.split("~")[0]);
				$("#card_period_end").val(data.contents.id_card_period.split("~")[1]);
				$("#account_bank").val(data.contents.account_bank);
				$("#account_name").val(data.contents.account_name);
				$("#account_number").val(data.contents.account_number);
				$("#bank_account_type").val(data.contents.bank_account_type);
				$('#theform2 input[name=account_bank]').autoComplete({
					url: "{echo url('banks/index')}",
					field: "",
					value: data.contents.account_bank,
					name_hidden: "bank_code",
					value_hidden: data.contents.bank_code,
				});
				//$('#theform2 input[name=bank_code]').val(data.contents.bank_code);
				if(data.contents.license_copy) {
					$("#license_copy").parent().addClass("hasImg");
					$("#license_copy").attr("src", data.contents.license_copy);
					$("input[name='license_copy']").val(data.contents.license_copy);
				} else {
					$("#license_copy").parent().removeClass("hasImg");
					$("#license_copy").attr("src", "/public/system/add-img.png");
					$("input[name='license_copy']").val("");
				}
				if(data.contents.id_card_copy) {
					$("#id_card_copy").parent().addClass("hasImg");
					$("#id_card_copy").attr("src", data.contents.id_card_copy);
					$("input[name='id_card_copy']").val(data.contents.id_card_copy);
				} else {
					$("#id_card_copy").parent().removeClass("hasImg");
					$("#id_card_copy").attr("src", "/public/system/add-img.png");
					$("input[name='id_card_copy']").val("");
				}
				if(data.contents.id_card_national) {
					$("#id_card_national").parent().addClass("hasImg");
					$("#id_card_national").attr("src", data.contents.id_card_national);
					$("input[name='id_card_national']").val(data.contents.id_card_national);
				} else {
					$("#id_card_national").parent().removeClass("hasImg");
					$("#id_card_national").attr("src", "/public/system/add-img.png");
					$("input[name='id_card_national']").val("");
				}
				if(data.contents.license_auth) {
					$("#license_auth").parent().addClass("hasImg");
					$("#license_auth").attr("src", data.contents.license_auth);
					$("input[name='license_auth']").val(data.contents.license_auth);
				} else {
					$("#license_auth").parent().removeClass("hasImg");
					$("#license_auth").attr("src", "/public/system/add-img.png");
					$("input[name='license_auth']").val("");
				}
				if(data.contents.store_door) {
					$("#store_door").parent().addClass("hasImg");
					$("#store_door").attr("src", data.contents.store_door);
					$("input[name='store_door']").val(data.contents.store_door);
				} else {
					$("#store_door").parent().removeClass("hasImg");
					$("#store_door").attr("src", "/public/system/add-img.png");
					$("input[name='store_door']").val("");
				}
				if(data.contents.store_inside) {
					$("#store_inside").parent().addClass("hasImg");
					$("#store_inside").attr("src", data.contents.store_inside);
					$("input[name='store_inside']").val(data.contents.store_inside);
				} else {
					$("#store_inside").parent().removeClass("hasImg");
					$("#store_inside").attr("src", "/public/system/add-img.png");
					$("input[name='store_inside']").val("");
				}
				if(data.contents.qualifications) {
					$("#qualifications").parent().addClass("hasImg");
					$("#qualifications").attr("src", data.contents.qualifications);
					$("input[name='qualifications']").val(data.contents.qualifications);
				} else {
					$("#qualifications").parent().removeClass("hasImg");
					$("#qualifications").attr("src", "/public/system/add-img.png");
					$("input[name='qualifications']").val("");
				}
				init_Form('select');
			},
			error: function(xhr, status){
				console.log(status);
				console.log(xhr);
				showAlert("获取商户信息失败");
			},
			complete: function(){
				hideLoader();
			},
			beforeSend: function(){
				showLoader();
			}
		});
	}
});
$("#business_license").click(function(){
	ocr("business_license", null, $("input[name='license_copy']").val());
});
$("#ocr_idcard_copy").click(function(){
	ocr("idcard", "face", $("input[name='id_card_copy']").val());
});
$("#ocr_idcard_national").click(function(){
	ocr("idcard", "back", $("input[name='id_card_national']").val());
});
function ocr(type, side, filename) {
	$.ajax({
		type: "POST",
		dataType: "json",
		cache: false,
		timeout: 20000,
		url: "{echo url('PayWeixin/get_ocr_body')}",
		data: {
			ajax: "json",
			type: type,
			side: side,
			filename: filename,
		},
		success: function(data){
			//console.log(data);
			if(data.status != 1) {
				showAlert(data.message);
			} else {
				if(type == "business_license") {
					$("#license_number").val(data.contents.reg_num);
					if(data.contents.name != $("#merchant_name").val()) {
						var merchant_name = data.contents.name;
						layer.open({
							anim: 0,
							closeBtn: 0,
							btn: ['确认', '取消'],
							content: "商户名称与营业执照不一致，确认自动更正！",
							yes: function(index, layero){
								$.ajax({
									type: "POST",
									dataType: "json",
									cache: false,
									timeout: 10000,
									url: "{echo url('merchant/set_name')}",
									data: {
										ajax: "json",
										merchant_id: merchant_id,
										merchant_name: merchant_name,
									},
									success: function(data){
										layer.close(index);
										$("#merchant_name").val(merchant_name);
									},
									error: function(xhr, status){
										console.log(status);
										console.log(xhr);
									}
								});
							},
							btn2: function(index, layero){
								layer.close(index);
							},
							cancel: function(index, layero){
								layer.close(index);
							}
						});
					}
				}
				if(type == "idcard") {
					if(side == "face") {
						$("#id_card_name").val(data.contents.name);
						$("#id_card_number").val(data.contents.num);
					} else {
						$("#card_period_begin").val(data.contents.start_date.replace(/^(\d{4})(\d{2})(\d{2})$/, '$1-$2-$3'));
						$("#card_period_end").val(data.contents.end_date.replace(/^(\d{4})(\d{2})(\d{2})$/, '$1-$2-$3'));
					}
				}
			}
		},
		error: function(xhr, status){
			console.log(status);
			console.log(xhr);
			showAlert("系统错误");
		},
		complete: function(){
			hideLoader();
		},
		beforeSend: function(){
			showLoader();
		}
	});
}
$(document).ready(function(){
	$(".opwindow .layui-tab .layui-tab-item").eq(0).height($(".opwindow .layui-tab .layui-tab-item").eq(1).height());
});
</script>
